<template>
	<div class="detailMain">
		<div class="back" @touchend="back"></div>
		<div class="picbookMain">
			<div class="picbook" :style="picbookStyle"></div>
			<div class="border"></div>
		</div>
		<div class="introductionMain">
			<div class="icon"></div>
			<div class="name">{{ picbook.name }}</div>
			<div class="introduction">{{ introduction }}</div>
			<div class="progress">
				<div ref="progress"></div>
			</div>
			<i ref="audio" @touchend="play"></i>
		</div>
		<div class="authorMain">
			<div class="icon"></div>
			<div class="name">
				<div class="wordAuthor">文作者:&nbsp;{{ picbook.detail.wordAuthor }}</div>
				<div class="imageAuthor">图作者:&nbsp;{{ picbook.detail.imageAuthor }}</div>
			</div>
		</div>
		<div class="start" @touchend="picbookTouch">进入绘本</div>
		<LoadPicbook ref="loadPicbook" />
		<Vip ref="vip" />
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import LoadPicbook from './loadPicbook.vue'
import Vip from '../common/vip.vue'
export default {
	components: {
		LoadPicbook,
		Vip
	},
	mounted() {
		this.play()
	},
	computed: {
		//封面图
		picbookStyle() {
			return {
				background: 'url(' + this.picbook.homeImageUrl + ')0 0/cover'
			}
		},
		picbook() {
			return this.picbookList.filter(item => {
				return item.id === this.$route.query.id
			})[0]
		},
		introduction() {
			return this.picbook.detail.introduction.substring(5, this.picbook.detail.introduction.indexOf('\n'))
		},
		...mapGetters('picbookListStatus', {
			picbookList: 'getPicbookList'
		}),
		...mapGetters('personalStatus', {
			userVip: 'getUserVip'
		})
	},
	methods: {
		back: function() {
			this.touchMusic()
			this.parseTextAudio({
				play: false
			})
			this.setLoading({
				callback: () => {
					this.$router.go(-1)
				}
			})
		},
		play: function() {
			this.clickMusic()
			this.$refs.audio.style.transform = 'scale(1.2)'
			this.$refs.progress.style.width = '0%'
			this.parseTextAudio({
				text: this.picbook.name,
				speaker: this.picbook.detail.speaker,
				start: () => {
					this.$refs.progress.style.transition = 'all 2s '
					this.$refs.progress.style.width = '20%'
				},
				end: () => {
					this.parseTextAudio({
						text: this.introduction,
						speaker: this.picbook.detail.speaker,
						start: () => {
							setTimeout(() => {
								const audio = document.getElementById('parseTextAudio')
								const time = audio.duration ? audio.duration.toFixed(2) : 5000
								this.$refs.progress.style.transition = 'all ' + time + 's linear'
								this.$refs.progress.style.width = '100%'
							}, 500)
						},
						end: () => {
							this.$refs.audio.style.transform = 'scale(1)'
							this.$refs.progress.style.transition = 'all 0s'
							this.$refs.progress.style.width = '0%'
						}
					})
				}
			})
		},
		//点击进入绘本
		picbookTouch: async function(item) {
			this.touchMusic()
			this.setIsSeedEntery(false)
			this.parseTextAudio({ play: false })

			this.$refs.loadPicbook.loadPicbook({
				picbookId: this.picbook.id,
				beforeRouter: 'picbookList'
			})
		},
		...mapActions('mainStatus', ['setLoading']),
		...mapActions('seedActivityStatus', ['setIsSeedEntery'])
	}
}
</script>
<style lang="stylus" scoped>
.detailMain
	position absolute
	width 100vw
	height 100vh
	background url($urlTitle + 'newList/详情背景.png') 0 0 / 100% 100%
	transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)
	color rgb(253, 152, 30)

	.back
		background url($urlTitle + 'icon/返回.png') 0 0 / 100% 100%
		$coord('WHLT', 3rem, 3.8rem, 1.5rem, 1rem)

	.start
		background url($urlTitle + 'icon/按钮-橙.png') 0 0 / 100% 100%
		$coord('WHLT', 18vh, 7vh, 50%, 70vh)
		margin-left -43vh
		color white
		$alignCenter()
		font-size 2.5vh
		letter-spacing 0.3vh

	.picbookMain
		$coord('WHLT', 68vh, 40vh, 50%, 20vh)
		margin-left -68vh
		background rgb(252, 146, 24)
		border-radius 3vh
		filter drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.3))

		.picbook
			$coord('WHLT', 65vh, 37vh, 1.5vh, 1.5vh)
			border-radius 2.5vh
			filter drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.3))

		.border
			$coord('WHLT', 63vh, 35vh, 2.5vh, 2.5vh)
			border 1px dashed white
			border-radius 2.5vh
			box-sizing border-box
			filter drop-shadow(0 0 1px rgba(0, 0, 0, 0.5))

	.introductionMain
		background url($urlTitle + 'newList/绘本详情背景.png') 0 0 / 100% 100%
		$coord('WHLT', 58vh, 38vh, 50%, 20vh)
		margin-left 10vh
		filter drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.3))
		box-sizing border-box
		padding 0 6vh

		i
			background url($urlTitle + 'icon/icon-语音.png') 0 0 / 100% 100%
			$coord('WHRB', 8vh, 7.8vh, 10vh, 3vh)
			transition all 0.3s

		.icon
			background url($urlTitle + 'newList/绘本详情.png') 0 0 / 100% 100%
			$coord('WHLT', 15vh, 7.1vh, 0, 3.5vh)

		.name
			margin-top 8.5vh
			font-size 3.5vh

		.introduction
			text-align left
			margin-top 2.5vh
			font-size 2.5vh
			color rgb(253, 182, 80)

		.progress
			$coord('WHRB', 25vh, 1vh, 22vh, 6.5vh)
			background rgb(244, 228, 220)
			border-radius 1vh
			filter drop-shadow(0 0 1px rgb(244, 228, 220))

			div
				position absolute
				height 100%
				border-radius 1vh
				left 0
				width 0%
				background rgb(253, 152, 30)

	.authorMain
		background url($urlTitle + 'newList/作者简介-背景.png') 0 0 / 100% 100%
		$coord('WHLT', 55vh, 35vh, 50%, 55vh)
		margin-left 11.5vh
		filter drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.3))
		font-size 3.5vh

		.icon
			background url($urlTitle + 'newList/作者简介.png') 0 0 / 100% 100%
			$coord('WHLT', 15vh, 7.1vh, -1.3vh, 9vh)

		.name
			height 10vh
			width auto
			margin-top 15vh
			display inline-block
			text-align left

			.imageAuthor
				margin-top 2.5vh
</style>
